<template>
  <div class="recharge">
    <el-dialog title="升级VIP" :visible.sync="isShow" center :before-close="close">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-position="left" label-width="120px">
        <el-form-item label="VIP等级" prop="vip">
          <el-select v-model="form.vip" placeholder="请选择购买vip等级">
            <el-option
              v-for="item in vipLevels"
              :disabled="item.level <= $store.state.user.vip"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class='vip_Introduction'>
        <h3>会员权益：</h3>
        <ul>
          <li><span>1，可享受撰写案件上报国知局后缴纳专利代理费和官费</span></li>
          <li><span>2，可享受提交订单后优先分配代理人特权</span></li>
          <li><span>3，可享受免技术交底文件撰写案件</span></li>
          <li><span>4，有权参加本系统推出的积分兑换现金的活动，<font class="font_success">{{minPoints}}</font>积分起兑</span></li>
        </ul>
        <div v-if="form.vip != ''" class='mt20'>
          <h3>{{ form.vip.slice(-1) | vipLevel }}特殊权益：</h3>
          <ul>
            <li><span><font class="font_success">1</font>积分可兑换<font class="font_success">{{ form.vip.slice(-1) | vipLevelPoints }}</font>元</span></li>
          </ul>
        </div>
      </div>
      <div slot="footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submint">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {

  data () {

    return {
      isShow: false,
      form: {
        vip: ''
      },
      rules: {
        vip: [
          { required: true, message: '请选择vip等级', trigger: 'change' }
        ]
      },
      vipLevels: [
        {
          value: 'vip1',
          label: '铜牌会员',
          level: 1,
        },
        {
          value: 'vip2',
          label: '银牌会员',
          level: 2,
        },
        {
          value: 'vip3',
          label: '金牌会员',
          level: 3,
        },
        {
          value: 'vip4',
          label: '钻石会员',
          level: 4,
        }
      ],
      id: null,
      vipLevelPoints: '',
      vipConfig: null,
      minPoints: 200
    }
  },
  computed: {
   
  },
  watch: {
    form: {
      handler: function(value) {
        if (value.vip && value.vip.slice(-1) >= 0) {
          this.minPoints = this.vipConfig[`vip${value.vip.slice(-1)}`].min
        } else {
          this.minPoints = 200
        }
      },
      deep: true,
    }
  },
  methods: {
    show(data) {
      this.isShow = true
      // this.id = data.id
      this.gitVipConfig()
    },
    // 获取用户vip 配置
    gitVipConfig() {
      this.$axios.get('api/activity/consumer_setting').then(res => {
        if (res.data.code == 200) {
            this.vipConfig = res.data.data
        }
      }).catch( error => {
        this.$message.error(error)
      })
    },
    submint() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$router.replace({
            name: 'payment',
            query: {
              type: 'buyVip',
              vip: btoa(this.form.vip),
              from: this.$route.path
            }
          })
        } else {
          return false;
        }
      })
    },

    close() {
      this.$refs['ruleForm'].resetFields()
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .recharge {
    .el-dialog {
      max-width: 500px;
    }
    .el-select {
      width: 100%;
    }
    .vip_Introduction {
      ul {
        margin-top: 10px;
        padding-left: 10px;
        li {
          list-style: none;
        }
      }
    }
  }
</style>
